<script>
import axios from 'axios'; // 引入 axios 用于发送 HTTP 请求

export default {
  name: 'ChatSettingsView',
  data() {
    return {


      doctor: {
        avatar: JSON.parse(localStorage.getItem('imageUrl')), // 默认头像 URL，可替换
        name: JSON.parse(localStorage.getItem('doctorName')),
        title: JSON.parse(localStorage.getItem('position')),
        remark: this.$route.params.remark,
      },
      isPinned: false, // 消息置顶开关状态
      isDoNotDisturb: false, // 消息免打扰开关状态


    }
  },
  methods: {

    // 跳转医生主页
    GoToNext(){
      console.log(`跳转到医生主页`);
    },
    onSetRemark() {
      // 跳转设置备注页面
      this.$router.push({ name: 'SetRemark'})
    },
    onTogglePin() {
      // 消息置顶开关的逻辑
      console.log(`消息置顶状态: ${this.isPinned}`);
    },
    onToggleDoNotDisturb() {
      // 消息免打扰开关的逻辑
      console.log(`消息免打扰状态: ${this.isDoNotDisturb}`);
    },
    goBack() {
      this.$router.push({ name: 'ChatPage' , params: { doctorName: this.doctor.name, position: this.doctor.title ,imageUrl: this.doctor.avatar}});
    },
  },
  created() {

  }

}

</script>

<template>
  <div class="chat-settings">

    <!-- 头部 -->
    <div class="header">
      <div class="arrow-left" @click="goBack">
        <svg class="ConsultationIcon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
          <path d="M333.994667 469.333333H853.333333v85.333334H333.994667l228.864 228.864-60.330667 60.330666L170.666667 512l331.861333-331.861333 60.330667 60.330666L333.994667 469.333333z" fill="#000000" p-id="2527"></path>
        </svg>
      </div>
      <span>聊天设置</span>
    </div>

    <!-- 医生信息 -->
    <div class="doctor-info" @click="GoToNext">
      <img :src="doctor.avatar" alt="医生头像" class="ChatSettingAvatar" />
      <div class="doctor-details">
        <h3>{{ doctor.name }}{{ doctor.remark }}</h3>
        <p>{{ doctor.title }}</p>
      </div>
      <span class="arrow-right"></span>
    </div>

    <!-- 设置选项 -->
    <div class="setting-item" @click="onSetRemark">
      <span>设置备注</span>
    </div>
    <div class="setting-item">
      <span>消息置顶</span>
      <el-switch @change="onTogglePin" v-model="isPinned" active-color="#008DF8" inactive-color="#DBDEE5"/>
    </div>
    <div class="setting-item">
      <span>消息免打扰</span>
      <el-switch @change="onToggleDoNotDisturb" v-model="isDoNotDisturb" active-color="#008DF8" inactive-color="#DBDEE5" />
    </div>


  </div>
</template>

<style scoped>
@import "ChatSettings.css";
</style>